<template>
   <div class="company-pt">
      <!-- 标题 -->
      <div  v-if="dailys.length==0" class="no-text">
         <p class="title-left">暂无</p>
      </div>
      <div class="project-process border-bottom">
      <!-- 头部下方晒场分类 -->
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
            <mt-tab-container v-model="selected" swipeable >
                    <mt-tab-container-item id="1">
                            <!-- 展示区域 -->
                        <div class="area-2">
                            <div class="bleachery-item" v-for="(item,Pindex) in dailys" :key="Pindex" >
                                <dl class="item-hd">
                                    <dt>
                                        <img :src="item.Headportrait"/>
                                    </dt>
                                    <dd>
                                        <p class="p-top">
                                            <span class="p-name">{{item.UserName}}</span>
                                            <span class="p-tips">{{item.Tags}}</span>
                                        </p>
                                        <p class="p-bottom">{{item.AddTime}}</p>
                                    </dd>
                                </dl>
                                <p class="p-sentence">{{item.Info}}</p>
                                <!-- 图片 -->
                                <!--  v-bind:data-original="img.replace('_ms.','_mx.')"  -->
                                
                                <div class="img-box">
                                    <!-- <div v-for="(img,index) in item.ArrAtlas" :key="index" v-preview="img"  preview-title-enable="false" preview-nav-enable="false">
                                        <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" />
                                    </div> -->
                                    <div>
                                <!-- <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" /> -->
                                        <img  v-for="(img,index) in item.ArrAtlas" :key="index" :src="img" :preview="item.Id" preview-text="上下拖动图片可退出预览">
                                    </div>
                                    
                                </div>
                                <!-- 打赏 -->
                                <div class="reward-area">
                                    <div class="reward-button"  @click="rewardShow(item.Id)">
                                        <svg class="icon  icon-dashang" aria-hidden="true">
                                            <use xlink:href="#icon-dashang"></use>
                                        </svg>
                                        <span>打赏</span>
                                    </div>
                                    <div>
                                    <div class="popup-2" v-show="item.Id==Boxid">
                                        <p class="first" @click="HandleLike(item.Id,Pindex)">
                                            <svg class="icon icon-jia" aria-hidden="true">
                                                <use xlink:href="#icon-zan"></use>
                                            </svg> 
                                            <span >赞</span>
                                        </p>
                                        <p @click="handleComment(item.Id,Pindex)">
                                            <svg class="icon icon-jia" aria-hidden="true">
                                                <use xlink:href="#icon-pinglun"></use>
                                            </svg> 
                                            <span>评论</span>
                                        </p>
                                    </div>
                                        <img src="~@/assets/talk_logo.png" @click="popupAction(item.Id)"/>
                                    </div>     
                                </div>
                                <!-- 点赞 -->
                                <div class="rewarder">
                                    <p class="p-top"></p>
                                    <p class="p-bottom">
                                        <svg class="icon icon-jia" aria-hidden="true">
                                            <use xlink:href="#icon-zan"></use>
                                        </svg>
                                        <span v-for="(like,lindex) in item.LikeMembers" :key="lindex">{{like.uname}} 、</span>
                                    </p>
                                </div>
                                <div class="talk-area">

                                    <p class="p-ques" @click="answerSome(item.Id,comment.id,Pindex)" v-for="(comment,cindex) in item.Comments" :key="cindex">
                                        <template v-if="comment.pid==0">
                                            <span class="name">{{comment.uname}}</span>：
                                            <span>{{comment.info}}</span>
                                        </template>
                                    <template v-else>
                                            <span class="name">{{comment.uname}}</span> &nbsp; 回复&nbsp;
                                            <span class="name">{{comment.pName}}</span>：{{comment.info}}
                                        </template>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </mt-tab-container-item>
                    
                    <div v-show="loading" class="page-infinite-loading">
                        <mt-spinner type="fading-circle"></mt-spinner>
                        加载中...
                    </div>
                    
            </mt-tab-container>
            </div>
            <!-- 回复某人的输入框  -->
            <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
            <div class="answer-to" v-show="popupAnswer">
                <input type="text" placeholder="有爱评论,说点好听的" v-model="commentText"/>
                <mt-button type="primary" @click="sendAnswer">发送</mt-button>
            </div>
            <!-- 遮罩层 -->
            <div class="hidder" @click="closeComment" v-show="commentShow">

            </div>
            <!-- 打赏某人弹窗 -->
            <mt-popup v-model="rewardVisible" popup-transition="popup-fade" class="rewardPopup">
                <div class="close-button" @click="rewardVisible=false">
                <img src="~@/assets/reward-close.png"/>
                </div>
                <div class="img-outer">
                    <img :src="this.$store.state.userinfo.headportrait"/>
                </div>
                <p class="name">{{this.$store.state.userinfo.name}}</p>
                <div class="price-select">
                    <span @click="handleReward(1)" :class="rewardIdx==1?'active':''">2元</span>
                    <span @click="handleReward(2)" :class="rewardIdx==2?'active':''">5元</span>
                    <span @click="handleReward(3)" :class="rewardIdx==3?'active':''">8元</span>
                    <span @click="handleReward(4)" :class="rewardIdx==4?'active':''">10元</span>
                </div>
                <p class="extra-price">其他金额(优先支付其他金额)</p>
                <div class="input-box">
                    <span>金额（元）</span>
                    <input type="number" v-model="otherprice" placeholder="请输入金额"/>
                </div>
                <mt-button type="default" class="reward-button" @click="handleRewardPay">打赏</mt-button>
            </mt-popup> 
      </div>
  </div>
  <!-- 晒场 -->
   
</template>
<script>
import { Navbar, TabItem,TabContainer, TabContainerItem } from 'mint-ui';
import {GetPageList,CommentAdd,CommentDel,DailyLike} from '@/api/daily';
export default {
    data(){
        return{
            title:'晒场',
            to:'/',
            selected:'1',
            flag:false,
            Boxid:'1000',
            loginId:0,
            id:0,
            rewardVisible:false, //打赏弹窗
            rewardIdx:1, //打赏索引
            rewardDailyId:0,
            commentText:'' ,//评论回复某人的输入框的值,
            commentdailyId:0,//评论的某个晒场id
            commentId:0,//回复时 某个评论的id
            commentCmd:"pl",//区别输入框是评论的还是回复的
            commentIndex:0,//评论索引
            popupAnswer:false,
            commentShow:false,

            dailys: {
                Comments:[],
                LikeMembers:[]
            },
            pageIndex:1,
            totalPage:0,
            loading: false, //是否显示加载中
            allLoaded: false, //加载完毕
               otherprice:0,//打赏其他金额
            price:0,//支付金额
        }
    },
    created(){
        this.Initialization();
        this.loginId=this.$store.state.userinfo.id;
        this.id=this.$route.params.id;
    },
    updated(){
        this.$nextTick(function() {
            var totalH=$('.bleachery-area').height();
            $('.hidder').height(totalH);
        })
    },
    methods:{
        Initialization(){
            this.$indicator.open();
            setTimeout(() => {
                GetPageList(this.loginId,this.id,this.pageIndex,0,'own').then(res => {
                if (res.StatusCode === 200) {
                    this.dailys = res.Data.PagedList;
                    this.totalPage = res.TotalPage;
                     this.$previewRefresh();
                    this.$indicator.close();
                }
                });
            }, 400);
        },
        HandleLike(id,index){
            if(this.loginId==0){
                  this.$toast("请先登录！！"); 
                   this.Boxid=-1;
                  return false;
            }
             DailyLike(this.loginId,id).then(res=>{
              if(res.StatusCode===200){
                   this.$nextTick(function () {
                        this.dailys[index].LikeMembers = res.Data;
                         this.Boxid=-1;
                    });
              }
              else{
                     this.$toast(res.Data); 
                     this.Boxid=-1;
              }
          });
        }, 
       loadMore() {
            //分页加载更多
            if (this.pageIndex >= this.totalPage) {
                this.allLoaded = true;
                return;
            }
            this.loading = true;
            setTimeout(() => {
                this.pageIndex++;
                GetPageList(this.loginId,0,this.pageIndex,0,'own').then(res => {
                if (res.StatusCode === 200) {
                    this.dailys = this.dailys.concat(res.Data.PagedList);
                }
                });
                this.loading = false;
          }, 1000);
        },
        // 评论打赏弹窗出现
        popupAction(index){
            console.log(index+",,,,"+this.flag);
            this.flag=!this.flag;
            this.commentShow=true;
            if(this.flag){
                this.Boxid=index;
            }
            else{
                this.Boxid=1000;
            }
        },
        // 弹出回复某人
        answerSome(id,pid,index){
           this.commentdailyId=id;
           this.commentId=pid;
         this.commentIndex=index;
           this.commentCmd="hf",
           this.popupAnswer=!this.popupAnswer;
           this.commentShow=true;
        },
        //点赞操作
        handleZan(){
            this.Boxid=1000;
            this.flag=false;
            this.commentShow=false;
        },
        // 评论操作
        handleComment(id,index){
            this.commentdailyId=id;
            this.commentCmd="pl";
            this.commentId=0;
           this.commentIndex=index;
            this.Boxid=1000;
            this.flag=false;
            this.popupAnswer=true;

        },
        // 确认发送回复
        sendAnswer(){
            if(this.loginId==0){
                  this.$toast("请先登录！！"); 
                  return false;
            }
            this.commentText=  this.commentText.replace(/(^\s*)|(\s*$)/g, "");
            if(  this.commentText==""){
                      this.$toast("评论不能为空"); 
                      return false;
            }
          var data={
              uid:this.loginId,
              dailyId:this.commentdailyId,
              pid:this.commentId,
              info:this.commentText
          }
           CommentAdd(data).then(res=>{
            if(res.StatusCode===200){
                   this.$nextTick(function () {
                       this.dailys[this.commentIndex].Comments = this.dailys[this.commentIndex].Comments.concat(res.Data);
                       this.commentText="";
                       this.$toast("评论成功");
             })
            }
            });
         this.commentText="";
            this.popupAnswer=false;
            this.commentShow=false;
        },
        // 关闭回复弹框
        closeComment(){
            this.popupAnswer=false;
            this.commentShow=false;
            this.flag=false;
            this.Boxid=1000;

        },
             //打赏弹窗出现
        rewardShow(dailyid){
              if(this.$store.state.userinfo.id==0){
               this.$router.push("/auth/login");    
            }
            this.rewardDailyId=dailyid;
            this.rewardVisible=true;

        },
        //切换选择金额
        handleReward(index){
            this.rewardIdx=index;
            switch (index) {
                case 1:
                    this.price=2;
                    break;
               case 2:
                    this.price=5;
                    break;
               case 3:
                   this.price=8;
                    break;
               case 4:
                  this.price=10;
                     break;
                default:
                    break;
            }
        },
        // 提交打赏
        handleRewardPay(){
           var price=0;
            if(this.otherprice==0){
                price=this.price;
            }
            else{
                price=this.otherprice;
            }
         var url=`http://www.zhugongzhe.com/OAuth2/wx/?uid=${this.$store.state.userinfo.id}&type=1&expandId=${this.rewardDailyId}&$summary=筑功者晒场打赏&price=${price}&backurl=${window.location.href}`;
         window.location.href=url;
        }
       
    },
    watch:{
        selected(val,oldval){
            this.selected=val;
            this.pageIndex=1;
            this.Initialization();
        }
    },
  
  
}
</script>

<style lang="scss" scoped>
.mint-navbar {
  border-bottom: 10px solid #f4f4f4;
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid #fd4f00;
  color: #df4f00;
  margin-bottom: -2px;
}
.mint-tab-item .mint-tab-item-label {
  font-size: 14px;
  color: #282828;
}
.bleachery-area {
  min-height: 736px;
  background: #f4f4f4;
}
.area-2 {
  .bleachery-item {
    padding-top: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f4f4f4;
    background: #fff;
    .item-hd {
      margin-left: 12px;
      margin-right: 12px;
      display: flex;
      dt {
        width: 40px;
        height: 40px;
        img {
          width: 40px;
          height: 40px;
          display: block;
          border-radius: 50%;
        }
      }
      dd {
        margin-left: 12px;
        .p-top {
          .p-name {
            font-size: 14px;
            color: #333333;
          }
          .p-tips {
            padding: 1px 6px;
            line-height: 18px;
            border: 1px solid #999999;
            color: #999999;
            border-radius: 9px;
            margin-left: 8px;
          }
        }
        .p-bottom {
          color: #666666;
        }
      }
    }
    .p-sentence {
      margin-top: 14px;
      color: #666666;
      font-size: 14px;
      line-height: 1.6;
      margin-left: 12px;
      margin-right: 12px;
    }
    .img-box{
            margin-left: 7px;
            margin-right: 7px;
            margin-top: 12px;
            div{
                width: 100%;
                 margin-bottom: 7px;
                 display: flex;
                 flex-wrap: wrap;
            }
            img{
                width: 33%;
                height: 124px;
                margin-right: 0.5%;
                margin-bottom: 0.5%;
                &:nth-child(3n+0){
                    margin-right: 0;
                } 
            }
        }
    .reward-area {
      margin-left: 12px;
      margin-right: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      div {
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          color: #666666;
          margin-left: 10px;
        }
        p {
          display: flex;
          align-items: center;
        }
      }
      .icon-dashang {
        color: #666666;
      }
      .popup-2 {
        padding: 5px 15px;
        background: #333333;
        border-radius: 3px;
        justify-content: space-between;
        margin-right: 10px;
        z-index: 999;
        .first:after {
          content: "|";
          background: #282828;
          margin: 0 5px;
        }
        span {
          color: #ffffff;
        }
        .icon {
          color: #ffffff;
        }
      }
      .icon {
        font-size: 16px;
      }
      img {
        width: 22.6px;
        height: 14px;
        z-index: 999;
      }
    }
    .rewarder {
      margin-left: 12px;
      margin-right: 12px;
      margin-top: 7px;
      .p-top {
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 8px solid #f4f4f4;
        margin-left: 10px;
      }
      .p-bottom {
        background: #f4f4f4;
        padding: 6px 7px;
        color: #5f8fd8;
        display: flex;
        align-items: center;
        .icon {
          margin-right: 7px;
        }
        span {
          margin-right: 10px;
        }
      }
    }
    .talk-area {
      margin: 0px 12px;
      border-top: 1px solid #dcdcdc;
      background: #f4f4f4;
      padding: 6px 8px;
      .p-ques {
        margin-bottom: 6px;
      }
      .name {
        color: #5f8fd8;
      }
    }
  }
}
// 回复某人弹窗
.answer-to {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  input {
    width: 80%;
    padding-left: 5px;
  }
  .mint-button {
    width: 20%;
    background: #fd4f00;
    font-size: 14px;
  }
}

//遮罩层
.hidder {
  background: pink;
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.rewardPopup{
    width: 96%;
    padding: 20px 10px;
    border-radius: 5px;
    .close-button{
        width: 13px;
        height: 13px;
        overflow: hidden;
        position: absolute;
        right:10px;
        top:10px;
        img{
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
    }
    .img-outer{
        width: 41.3px;
        height: 41.3px;
        overflow: hidden;
        border-radius: 50%;
        margin:0 auto;
        img{
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
    }
    .name{
        color:#333;
        font-size: 14px;
        text-align: center;
        margin:10px auto;
    }
    .price-select{
        display: flex;
        justify-content: space-between;
        span{
            width: 80px;
            height: 30px;
            border:1px solid #3887fe;
            border-radius: 5px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            color:#3887fe;
        }
        .active{
            background: #3887fe;
            color:#fff;
        }
    }
    .extra-price{
        font-size: 16px;
        color:#666;
        text-align: center;
        margin-top:28px;
        margin-bottom: 16px;
    }
    .input-box{
        width: 100%;
        border:1px solid #eeeeee;
        height: 40px;
        padding: 0 23.3px;
        display: flex;
        align-items: center;
        span{
            font-size: 16px;
            color:#333;
        }
        input{
           height: 25px;
        //    line-height: 25px;
        margin-top:3px;
        color:#999;
        font-size: 16px;
        }
        input::-webkit-input-placeholder{
            color:#999;
            font-size: 16px;
        }
    }
    .reward-button{
        width: 140px;
        height: 32px;
        background: #ff0000;
        color:#fff;
        text-align: center;
        line-height: 32px;
        margin:33px auto;
        display: block;
        margin-bottom: 0;
    }
}
</style>
